import React from 'react';
import {Affix, Button} from 'antd';
import {PageContainer} from '@ant-design/pro-components';
import {Card} from 'antd';

const NavAffix: React.FC = () => {
  const [top, setTop] = React.useState<number>(100);
  const [bottom, setBottom] = React.useState<number>(100);
  return (
    <PageContainer>
      <Card style={{borderRadius: 8,}}>
        <Affix offsetTop={top}>
          <Button type="primary" onClick={() => setTop(top + 10)}>
            Affix top
          </Button>
        </Affix>
        <br/>
        <Affix offsetBottom={bottom}>
          <Button type="primary" onClick={() => setBottom(bottom + 10)}>
            Affix bottom
          </Button>
        </Affix>
      </Card>
    </PageContainer>
  );
};

export default NavAffix;
